<template>
	<view class="page">

		<view class="cu-form-group">
			<view class="title">日程标题</view>
			<input v-model="scheduleform.title" class="input" type="text" placeholder="添加日程,会议,活动等标题"/>
		</view>
		<view class="cu-form-group">
			<view class="title">全天</view>
			<switch :checked="scheduleform.allDaySwitch" @change="switchChange()"/>
		</view>
		<!-- 开始日期 -->
		<view class="cu-form-group">
			<view class="section" style="width: 100%;">
			  <picker mode="date" :value="startdate" start="2021-01-01" end="2022-12-31" @change="bindDateChange" style="width: 100%;">
			    <view class="picker" style="display: flex;width: 100%;justify-content: flex-start;">
					<view style="width:20%;text-align: left;">开始日期</view>
					<view style="width: 70%;text-align: left;">{{startdate}}</view>
				</view>
			  </picker>
			</view>
		</view>
		<!-- 开始时间 -->
		<view class="cu-form-group" v-show="!switchbtn">
			<view class="section" style="width: 100%;">
			  <picker mode="time" :value="starttime" start="09:00" end="17:00" @change="bindTimeChange" style="width: 100%;">
			    <view class="picker" style="display: flex;width: 100%;justify-content: flex-start;">
					<view style="width:20%;text-align: left;">开始时间</view>
					<view style="width: 70%;text-align: left;">{{starttime}}</view>
				</view>
			  </picker>
			</view>
		</view>
		<!-- 结束日期 -->
		<view class="cu-form-group">
			<view class="section" style="width: 100%;">
			  <picker mode="date" :value="enddate" :start="starttime" end="2022-12-31" @change="bindDateChange2" style="width: 100%;">
			    <view class="picker" style="display: flex;width: 100%;justify-content: flex-start;">
					<view style="width:20%;text-align: left;">结束日期</view>
					<view style="width: 70%;text-align: left;">{{enddate}}</view>
				</view>
			  </picker>
			</view>
		</view>
		<!-- 结束时间 -->
		<view class="cu-form-group" v-show="!switchbtn">
			<view class="section" style="width: 100%;">
			  <picker mode="time" :value="endtime" start="09:00" end="17:00" @change="bindTimeChange2" style="width: 100%;">
			    <view class="picker" style="display: flex;width: 100%;justify-content: flex-start;">
					<view style="width:20%;text-align: left;">结束时间</view>
					<view style="width: 70%;text-align: left;">{{endtime}}</view>
				</view>
			  </picker>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">地点</view>
			<input v-model="scheduleform.address" class="input" type="text" placeholder="添加地点或会议室"/>
		</view>
		<view class="cu-form-group">
			<view class="title">备注</view>
			<input v-model="scheduleform.remark" class="input" type="text" placeholder="添加备注"/>
		</view>
		
		<!-- <view class="cu-form-group">
			<view>类型</view>
			<radio-group @change="handleStateChange">
				<label class="radio margin-right" v-for="(item, index) in checkType" :key="index">
					<radio :value="item.key" :checked="item.key === sendDate.type" :color="themeColor.color" style="transform: scale(0.75);" />
					{{ item.value }}
				</label>
			</radio-group>
		</view> -->

		<!-- <view class="covers-title">
			<text>现场图片(请上传打卡现场图片)</text>
		</view>
		<view class="covers-body covers-uploader oa-uploader">
			<view class="uni-uploader">
				<view class="uni-uploader-head">
					<view class="uni-uploader-title">点击预览图片</view>
					<view class="uni-uploader-info">{{ imageList.length }}/6</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file" style="position: relative;">
								<oa-image class="uni-uploader__img" :src="image"></oa-image>
								<view class="close-view" @tap="close(index)" :class="'bg-' + themeColor.name">x</view>
							</view>
						</block>
						<view class="uni-uploader__input-box" v-if="imageList.length < 6">
							<view class="uni-uploader__input" @tap="uploadImage"></view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<button
			class="confirm-btn"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@tap="send"
			@click="addSchedule()"
			v-if="!scheduleform.sid"
		>
			新建日程
		</button>
		<!-- <button
			class="confirm-btn"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@tap="send"
			@click="addSchedule()"
			v-if="scheduleform.sid"
		>
			修改日程
		</button> -->
		<button
			class="confirm-btn"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@tap="send"
			@click="delSchedule()"
			v-if="scheduleform.sid"
		>
			删除日程
		</button>

	</view>
</template>

<script>
import { uploadImage } from '@/api/userInfo';
import { check,attendCheckType,getAttendClasses } from '@/api/basic';
import nativeUtil from "@/utils/native-nfc-util.js"
export default {
	data() {
		return {
			sendDate: {
				classes_id:1,
				type:0,
			},
			place:{},
			checkType:[{"key":"0","value":"签到"},{"key":"1","value":"签退"}],
			classesType:[{"key":"1","value":"白班"}],
			imageList: [],
			btnLoading: false,
			startdate: '',
			starttime: '',
			enddate: '',
			endtime: '',
			scheduleform: { // 表单
				title: '',
				allDaySwitch: true,
				startTime: '',
				endTime: '',
				address: '',
				remark: '',
				color: 0,
				eIds: []
			},
			switchbtn: true // 全天开关
		};
	},
	onLoad(option) {
		if(option) {
			this.scheduleform = {};
			this.scheduleform = JSON.parse(option.schedule);
			this.startdate = this.scheduleform.startTime.substring(0, 10);
			this.starttime = this.scheduleform.startTime.substring(11,16);
			this.enddate = this.scheduleform.endTime.substring(0, 10);
			this.endtime = this.scheduleform.endTime.substring(11,16);
			this.allDay();
			this.switchbtn = this.scheduleform.allDaySwitch;
			// console.log(this.scheduleform);
		} else {
			this.scheduleform.allDaySwitch = true;
			this.switchbtn = true;
		}
	},
	onShow(option) {
		uni.setNavigationBarColor({
		    frontColor: '#ffffff',
		    backgroundColor: this.themeColor.color,
		    animation: {
		        duration: 400,
		        timingFunc: 'easeIn'
		    }
		})
	},
	
	methods: {
		// 删除日程
		delSchedule() {
			const headers = {
				authentication: wx.getStorageSync('tokenStr')
			};
			wx.request({
				url:`http://121.36.218.32:9887/clouddocument/schedule/${this.scheduleform.sid}`,
				method: 'DELETE',
				header: headers,
				success(resp) {
					this.$mHelper.toast('日程删除成功');
					wx.navigateBack({
						url: `/pages/attend/plan`
					})
				}
			})
		},
		// 判断是否全天
		allDay() {
			if(this.starttime=='09:00' && this.endtime=='17:00') this.scheduleform.allDaySwitch = true;
			else this.scheduleform.allDaySwitch = false;
		},
		// 提交新建的日程数据
		addSchedule() {
			if(this.scheduleform.title){
				this.scheduleform.allDaySwitch = Number(this.scheduleform.allDaySwitch);
				if(this.starttime) {
					this.starttime = this.starttime + ':00';
					this.scheduleform.startTime = this.startdate + ' ' + this.starttime;
				} else {
					this.scheduleform.startTime = this.startdate + ' 09:00:00'
				}
				if(this.endtime) {
					this.endtime = this.endtime + ':00';
					this.scheduleform.endTime = this.enddate + ' ' + this.endtime;
				} else {
					this.scheduleform.endTime = this.enddate + ' 17:00:00';
				}
				const headers = {
					authentication: wx.getStorageSync('tokenStr')
				};
				wx.request({
					url: 'http://121.36.218.32:9887/clouddocument/schedule/',
					method: 'post',
					data: {
						title: this.scheduleform.title,
						allDaySwitch: this.scheduleform.allDaySwitch,
						startTime: this.scheduleform.startTime,
						endTime: this.scheduleform.endTime,
						address: 'sicnu',
						remark: this.scheduleform.remark,
						color: 1,
						eIds: []
					},
					header: headers,
					success(resp) {
						console.log(resp);
					}
				})
			}else{
				this.$mHelper.toast('请填写日程标题');
			}
		},
		// 全天按钮切换
		switchChange() {
			this.scheduleform.allDaySwitch = !this.scheduleform.allDaySwitch;
			this.switchbtn = this.scheduleform.allDaySwitch
		},
		// 修改startdate
		bindDateChange: function(e) {
		    console.log('picker发送选择改变，携带值为', e.detail.value)
		    this.startdate = e.detail.value
		  },
		// 修改starttime
		bindTimeChange: function(e) {
		    console.log('picker发送选择改变，携带值为', e.detail.value)
		    this.starttime = e.detail.value
		},
		// 修改date
		bindDateChange2: function(e) {
		    console.log('picker发送选择改变，携带值为', e.detail.value)
		    this.enddate = e.detail.value
		  },
		// 修改time
		bindTimeChange2: function(e) {
		    console.log('picker发送选择改变，携带值为', e.detail.value)
		    this.endtime = e.detail.value
		},
		// 监听反馈类型事件
		handleClassesChange(e) {
			this.sendDate.classes_id = e.detail.value;
		},
		handleStateChange(e) {
			this.sendDate.type = e.detail.value;
		},

		// 打开相册选图
		uploadImage() {
			const _this = this;
			uni.chooseImage({
				count: 6, // 最多一次可以选择的图片张数
				sizeType: ['compressed'],
				sourceType: ['camera'], // album 从相册选图，camera 使用相机
				success: function(res) {
					if (_this.imageList.length + res.tempFiles.length > 6) {
		        _this.$mHelper.toast('不要贪心哦，最多只可上传6张照片');
		        return;
					}
					_this.handleUploadFile(res.tempFilePaths);
				}
			});
		},
		// 依次上传图片
		handleUploadFile(data) {
			this.$mHelper.toast('上传成功');
		},
		// 删除已选中图片
		close(e) {
			this.imageList.splice(e, 1);
		},
		// 发送数据
		async send() {
			this.$mHelper.toast('提交成功');
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $page-color-base;
}
.cu-form-group {
	border-style: none;
	background-color: $page-color-base;
	padding: $spacing-base;
	width: 100%;
	display: flex;
	align-items: center;
	// min-height: 100upx;
	justify-content: flex-start;
	.title {
		width: 20%;
		padding: 0rpx;
		text-align: left;
	}
	.input {
		width: 70%;
	}
	
}
/*表单标题*/
.input-t {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-base;
	margin-top: $spacing-base;
	font-size: $font-base;

}
.tit {
			width: 80%;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
}
.input-quick {
	position: relative;
	padding-right: 40upx;
	.iconfont {
		font-size: $font-sm;
	}
}

.input-body {
	background: $color-white;
	padding: $spacing-sm $spacing-base;
	.gender-item {
		margin-right: 20upx;

		.gender-item-text {
			padding-left: 10upx;
		}

	}
}

.input-textare {
	height: 200upx;
	font-size: 34upx;
	line-height: 50upx;
	width: 100%;
	box-sizing: border-box;
	padding: 20upx 30upx 0;
}

.covers-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: $spacing-base;
	margin-top: $spacing-base;
	font-size: $font-base;

}
.covers-body {
	background: $color-white;
	padding: $spacing-sm $spacing-base;
	.gender-item {
		margin-right: 20upx;

		.gender-item-text {
			padding-left: 10upx;
		}

		radio .wx-radio-input.wx-radio-input-checked {
			background: $uni-color-primary;
			border-color: $uni-color-primary;
		}
	}
}
.covers-uploader {
	padding: 22upx 20upx;
}
</style>
